<template>
  <div style="height: 100px">
    <el-tabs v-model="calculateTypeActive" @tab-click="calculateTypeTabChange">
      <el-tab-pane :label="item.name" :name="item.id" v-for="(item, index) in calculateTypeList" :key="item.id">
        <el-checkbox-group v-model="item.checkArr">
          <el-checkbox :label="cItem.key" :key="cItem.key" v-for="cItem in dimensionalityList">
            {{ cItem.label }}
          </el-checkbox>
          <el-button type="text" icon="el-icon-setting" size="medium" @click="dimensionalityCfgShow(index)">
            统计维度配置
          </el-button>
        </el-checkbox-group>
      </el-tab-pane>
    </el-tabs>
    <el-button @click="confim">确认</el-button>
    <DimensionalityTransfer ref="dimensionalityTransfer" @dimensionalityConfirm="dimensionalityConfirm"/>
  </div>
</template>

<script>
import DimensionalityTransfer from './components/DimensionalityTransfer.vue'
import {includes, intersection} from "lodash";

const mockStyleData = [
  {
    id: 3,
    name: '计数',
    checkArr: [],
  }, {
    id: 5,
    name: '求和',
    checkArr: [],
  }, {
    id: 6,
    name: '平均',
    checkArr: [],
  }
];
const mockData = [
  {
    key: 1,
    label: 'A',
    isView: 1,
  },
  {
    key: 2,
    label: 'B',
    isView: 1,
  },
  {
    key: 3,
    label: 'C',
    isView: 1,
  }
];
const mockData2 = [
  {
    key: 4,
    label: 'D',
    isView: 1,
  },
  {
    key: 5,
    label: 'E',
    isView: 1,
  },
  {
    key: 6,
    label: 'F',
    isView: 1,
  }
];
const mockData3 = [
  {
    key: 7,
    label: 'G',
    isView: 1,
  },
  {
    key: 8,
    label: 'H',
    isView: 1,
  },
  {
    key: 9,
    label: 'U',
    isView: 1,
  }
];
export default {
  name: "Mui",
  data() {
    return {
      ruleForm: {
        way: '', // 统计方式
      },
      // 统计方式相关数据
      calculateTypeActive: '',
      calculateTypeList: [],
      // 统计维度相关数据
      dimensionalityList: [],
      dimensionalityListAll: [],
    }
  },
  components: {DimensionalityTransfer},
  created() {
    this.getCalculateTypeData();
  },
  methods: {
    // 获取统计方式
    getCalculateTypeData() {
      new Promise((resolve) => {
        setTimeout(() => {
          resolve(true)
        }, 1000)
      }).then(() => {
        this.calculateTypeList = [];
        for (const item of mockStyleData) {
          this.calculateTypeList.push({
            id: String(item.id),
            name: item.name,
            checkArr: [],
          })
        }
        this.getDimensionalityData(this.calculateTypeList[0].id);
      })
    },
    // 根据统计方式和日志类型后去统计维度
    getDimensionalityData(wayId) {
      new Promise((resolve) => {
        setTimeout(() => {
          resolve(true)
        })
      }).then(() => {
        this.dimensionalityList = [];
        this.dimensionalityListAll = [];
        switch (wayId) {
          case '3':
            for (const itme of mockData) {
              this.dimensionalityList.push({
                ...itme
              })
              this.dimensionalityListAll.push({
                ...itme
              })
            }
            break;
          case '5':
            for (const itme of mockData2) {
              this.dimensionalityList.push({
                ...itme
              })
              this.dimensionalityListAll.push({
                ...itme
              })
            }
            break;
          case '6':
            for (const itme of mockData3) {
              this.dimensionalityList.push({
                ...itme
              })
              this.dimensionalityListAll.push({
                ...itme
              })
            }
            break;
        }
        this.calculateTypeActive = wayId;
      })
    },
    // 统计方式tab面板点击事件
    calculateTypeTabChange() {
      this.getDimensionalityData(this.calculateTypeActive);
    },
    // 统计维度穿梭框展示
    dimensionalityCfgShow(index) {
      console.log(index, this.calculateTypeList[index]);
      this.$refs.dimensionalityTransfer.initDialog(0, this.calculateTypeList[index].id, this.dimensionalityListAll, index);
    },
    // 统计维度穿梭框确认
    dimensionalityConfirm(selectIds, tabIndex) {
      this.dimensionalityList.length = 0;
      for (const item of this.dimensionalityListAll) {
        if (includes(selectIds, item.key)) {
          item.isView = 1;
          this.dimensionalityList.push({
            key: item.key,
            label: item.label,
          })
        } else {
          item.isView = 0;
        }
      }
      this.calculateTypeList[tabIndex].checkArr = intersection(selectIds, this.calculateTypeList[tabIndex].checkArr)
    },

    confim() {
      // console.log(this.calculateTypeList);
      const ways = [];
      const jsonParams = [];
      for (const item of this.calculateTypeList) {
        if (item.checkArr.length) {
          ways.push(item.id);
          jsonParams.push({
            way: item.id,
            dimensionality: item.checkArr.join(',')
          })
        }
      }
      if (!jsonParams.length) {
        this.$message.error('请选择统计维度');
        return false;
      }
      console.log(jsonParams);
    }
  }
};
</script>

<style scoped lang="scss">

</style>